<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义查询添加编辑</title>
    <link rel="stylesheet" href="${ctx}/css/form.css">
    <#include "/pubHeadStyle.html">
</head>
<body>
<form class="layui-form" action="" id="treeForm" lay-filter="formData" style="height: 100%;background: #fff;">
        <div style="position: absolute;bottom:7px;left:39%">
            <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>            <button class="layui-btn layui-btn-danger" id="return">取消</button>

        </div>
    <div  style="padding-top:8px;height: 300px;overflow-y: auto;">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 17%;">名称:<span style="color:red;">*</span></label>
        <div class="layui-input-block" style="margin-left: 132px;width: 70%">
            <input type="text" name="name" id="treeName" class="layui-input" lay-verify="required" placeholder="名称" maxlength="25"/>
            <input type="hidden" name="formKey" id="formKey" class="layui-input" lay-verify="required" placeholder="FormKey" value=${formKey} />
            <input type="hidden" name="id" id="treeStructureId" class="layui-input" placeholder="treeStructureId" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 17%;">树主键字段:<span style="color:red;">*</span></label>
        <div class="layui-input-block" style="margin-left: 132px;width: 70%">
            <select name="treeId" id="treeId" lay-filter="treeId">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 17%;">树父主键字段:<span style="color:red;">*</span></label>
        <div class="layui-input-block" style="margin-left: 132px;width: 70%">
            <select name="parentId" id="parentId" lay-filter="parentId">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 17%;">显示字段:<span style="color:red;">*</span></label>
        <div class="layui-input-block" style="margin-left: 132px;width: 70%">
            <select name="displayField" id="displayField" lay-filter="displayField">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 17%;">加载方式:<span style="color:red;">*</span></label>
        <div class="layui-input-block" style="margin-left: 132px;width: 70%">
            <select name="loadType" id="loadType" lay-filter="loadType">
                <option value=""></option>
                <option value="0">同步</option>
                <option value="1">异步</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item layui-hide" id="rootFidDiv">
        <label class="layui-form-label" style="width: 17%;">根节点父ID:</label>
        <div class="layui-input-block" style="margin-left: 132px;width: 70%">
            <input type="text" name="rootId" id="rootId" class="layui-input" placeholder="根父节点ID"/>
        </div>
    </div>
    </div>
</form>
<script>
    var formKey = '${formKey}';
    var setter;
    layui.config({
        base: serverPath.formPath + staticPath.formPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index', 'form', 'layedit', 'jquery', 'layer','setter','commons'], function () {
        var form = layui.form;
        var layer = layui.layer;
        setter = layui.setter;
        var $ = layui.$;
        var commons = layui.commons;

        //下拉框选项
        $.ajax({
            url: serverPath.formPath + setter.formLinkPath +"formDefTree/getObject",
            type: "GET",
            contentType: 'application/json',
            dataType: 'json',
            data: {"action": "formTable", "formKey": formKey},
            success: function (data) {
                var returnDate = data.data;
                $.each(returnDate.formField, function (index, objVal) {
                    $("#treeId").append("<option value=" + objVal.fieldName+ ">" + objVal.fieldDesc + "</option>");
                    $("#parentId").append("<option value=" + objVal.fieldName + ">" + objVal.fieldDesc + "</option>");
                    $("#displayField").append("<option value=" + objVal.fieldName + ">" + objVal.fieldDesc + "</option>");
                });
                form.render();
                loadAjax();
            }
        });
        var index = parent.layer.getFrameIndex(window.name);
        $('#return').click(function () {
            parent.layer.close(index);
        });
        //请求数据回显
        function loadAjax(){
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath +"formDefTree/getObject",
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                data: {"action": "formDefTree", "formKey": formKey},
                success: function (data) {
                    var returnDate = data.data;
                    if(returnDate!=null) {
                        $("#treeStructureId").val(returnDate.id);
                        $("#treeName").val(returnDate.name);
                        $("#formKey").val(returnDate.formKey);
                        //动态数据的下拉框赋值
                        $("#treeId").val(returnDate.treeId);
                        $("#parentId").val(returnDate.parentId);
                        $("#displayField").val(returnDate.displayField);
                        $("#loadType").val(returnDate.loadType);
                        if(returnDate.loadType === '1'){
                            $("#rootFidDiv").removeClass("layui-hide");
                            $("#rootId").val(returnDate.rootId);
                        }
                        var returnBtn = $("#return");
                        returnBtn.parent("div").append('<button class="layui-btn layui-btn-normal" onclick="showTree();">预览</button>');
                        returnBtn.parent("div").css("left",'31%');
                    }
                    form.render('select');
                }
            });
        }
        //监听提交
        form.on('submit(save)', function (data) {
            if ($('#parentId').val() === "" || $('#treeId').val() === ""|| $('#displayField').val() === "") {
                layer.alert("请正确选择树主键字段,树父主键字段,显示字段！");
                return false;
            }
            if($('#treeName').val() === ""){
                layer.alert("请输入树结构名称！");
                return false;
            }
            if($('#loadType').val() === ""){
                layer.alert("请选择加载方式！");
                return false;
            }
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath +"formDefTree/save",
                type: "post",
                contentType: 'application/json',
                dataType: 'json',
                data:JSON.stringify(data.field),
                success: function (result) {
                    if (commons._filterRecord(result)) {
                        layer.alert(result.msg,{skin: 'btn-class'}, function () {
                            parent.layui.table.reload('customForm', {
                                page: {
                                    curr: 1
                                }
                            });
                            parent.layui.totalFilter.init('customForm');
                            commons._bulletWindow(index);
                        });
                    } else {
                        window.parent.layer.alert(result.msg);
                    }
                }
            });
            return false;
        });

        //根据是否异步的条件来显示与隐藏根节点父id 输入框
        form.on('select(loadType)',function (data) {
            if(data.value === 1){
                $("#rootFidDiv").removeClass("layui-hide");
                $("#rootId").val(0);
            }else{
                $("#rootFidDiv").addClass("layui-hide");
                $("#rootId").val("");
            }
        })
    });
    //预览
    function showTree() {
        parent.layer.open({
            type: 2,
            area: ['100%', '100%'],
            title: ['预览'],
            content: serverPath.formPath + setter.formLinkPath +'formDefTree/view/treePreview?formKey=' + formKey
        });
    }
</script>
</body>
</html>